body{
    background-color: rgb(243, 244, 245);
}
.more{
    width: 100%;
    .search{
        width: 100%;
        height: 2.5rem;
        padding: .5rem .75rem;
        box-sizing: border-box;
        background-color: transparent;
        .input{
            width: 100%;
            height: 100%;
            color: #98989e;
            font-size: .6rem;
            background: #f3f4f4;
            border: 0.05rem solid #edeeee;
            box-sizing: border-box;
            border-radius: 0.1rem;
            line-height: 100%;
            position: relative;
            .searchBtn{
                position: absolute;
                right: .2rem;
                top: 0;
                height: 100%;
                width: 1.5rem;
                background: url("https://h2.appsimg.com/a.appsimg.com/upload/upimg2/i/e51295227c46c295.png") no-repeat 50%;
                opacity: .5;
                background-size: 50%;
                filter: invert(100%);
            }
        }    
    }
    .mores{
        display: flex;
    }
    .moreLeft{
        width: 4.65rem;
        height: auto;
        display: inline-block;
        ul{
            width: 100%;
            height: auto;
            display: inline-block;
            text-align: center;
            li{
                width: 100%;
                height: 2.4rem;
                line-height: 2.4rem;
                display: inline-block;
                background-color: transparent;
                color: #585c64;
                font-size: .7rem;
                position: relative;
                box-sizing: border-box;
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    left: 50%;
                    bottom: 0.025rem;
                    transform: translateX(-50%);
                    width: 2.75rem;
                    height: 0.001rem;
                    background: #e3e5e7;
                }
            }
            .active{
                background-color: #fff;
                color: #222;
                position: relative;
                &::after{
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: .2rem;
                    height: 100%;
                    font-size: 0;
                    background-color: #f03867;
                }
                &::before{
                    display: none;
                }
            }
        }
    }
    .moreRight{
        width: 14.25rem;
        height: auto;
        display: inline-block;
        background-color: #fff;
        .top{
            width: 100%;
            text-align: center;
            margin-top: .7rem;
            img{
                width: 12.75rem;
                height: 5.1rem;
            }
        }
        .recommend{
            width: 100%;
            padding-top: 1rem;
            box-sizing: border-box;
            .title{
                width: 11.55rem;
                font-size: .6rem;
                letter-spacing: normal;
                overflow: hidden;
                color: #333;
                margin: auto;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                &>span:nth-of-type(1){
                    font-weight: bold;
                }
                &>span:nth-of-type(2){
                    position: relative;
                    margin-right: .4rem;
                }
                &>span:nth-of-type(2)::after{
                    content: "";
                    background: url("");
                    background-size: 100% 100%;
                    display: block;
                    position: absolute;
                    top: 30%;
                    right: -.4rem;
                    width: .4rem;
                    height: .4rem;
                }
            }
            .list{
                width: 11.85rem;
                margin: auto;
                box-sizing: border-box;
                border-bottom: 1px solid #e3e5e7;
                display: flex;
                justify-content: space-between;
                margin-top: 1.1rem;
                flex-wrap: wrap;
                .alist{
                    display: block;
                    width: 3.3rem;
                    height: 5.25rem;
                    img{
                        width: 3.1rem;
                        height: 3.1rem;
                        margin: auto;
                    }
                    span{
                        text-align: center;
                        width: 100%;
                        display: inline-block;
                        font-size: .6rem;
                        overflow: hidden;
                    }
                }
            }
            // &:nth-last-of-type(1){
            //     .list{
            //         border-bottom: none;
            //     }
            // }
        }   
        .chanel{
            width: 12.75rem;
            height: 1.75rem;
            line-height: 1.75rem;
            margin: auto;
            text-align: center;
            font-size: .6rem;
            color: #d372a7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #fcf0f7;
            margin-bottom: 5.5rem;
            box-sizing: border-box;
        }
    }
}
@media screen and (min-width:768px) {
    .container{
        width: 632px;
        margin: auto;
    }
}